<template>
  <div id="integrated_module">
    <el-row class="line">
      <el-col :span="4" class="key">位置</el-col>
      <el-col :span="20">
        <el-row>
          <a class="title">热门区域</a>
          <a class="title">定位周边区域</a>
        </el-row>
        <el-row>
          <a v-for="t in title" :key="t" class="word"> {{ t }}</a>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="line">
      <el-col :span="4" class="key">价格</el-col>
      <el-col :span="20">
        <el-row>
          <a class="title">单价（元/斤)</a>
          <a class="title">总价（元/车）</a>
        </el-row>
        <el-row>
          <a v-for="w in line1" :key="w" class="word"> {{ w }}</a>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="line">
      <el-col :span="4" class="key">规格</el-col>
      <el-col :span="20">
        <el-row>
          <a class="title">按体长分(mm)</a>
          <a class="title">按体重分（头/斤）</a>
        </el-row>
        <el-row>
          <a v-for="w in line2" :key="w" class="word"> {{ w }}</a>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="line">
      <el-col :span="4" class="key">分类</el-col>
      <el-col :span="20">
        <el-row>
          <a class="title">按学名</a>
          <a class="title">按俗名</a>
        </el-row>
        <el-row>
          <a v-for="w in line3" :key="w" class="word"> {{ w }}</a>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="line">
      <el-col :span="4" class="key">养殖方式</el-col>
      <el-col :span="20">
        <el-row>
          <a v-for="w in line4" :key="w" class="word"> {{ w }}</a>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="line">
      <el-col :span="4" class="key">更多</el-col>
      <el-col :span="20">
        <el-row>
          <a v-for="w in line5" :key="w" class="word"> {{w}}</a>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ShrimpGuide",
  data() {
    return {
      title: ["辽宁省大连养殖区", "河北省唐山养殖区", "山东省烟台养殖区", "江苏省盐城养殖区",
        "上海市青浦养殖区", "浙江省舟山养殖区", "福建省宁德养殖区", "广东省汕头养殖区"],
      line1: ["＜10", "10~20", "20~30", "30~40", "40~60", "＞60"],
      line2: ["＜12mm", "12~13mm", "13~14mm", "14~15mm", "15~17mm", "＞17mm"],
      line3: ["南美白对虾", "中国对虾", "日本对虾", "斑节对虾", "罗氏沼虾", "其他"],
      line4: ["池塘养殖", "稻田养殖", "水库养殖", "网箱养殖", "工厂化养殖", "其他"],
      line5: ["出塘时间", "水产品安全性", "养殖场环保性", "运输条件", "存活率预测/担保"]
    };
  }
};
</script>

<style scoped>
.key {
  font-size: 18px;
  font-weight: 500;
  margin: auto 0;
}

.title {
  font-size: 15px;
  font-weight: 480;
  padding-right: 20px;
}

.word {
  font-size: 12px;
  font-weight: 420;
  padding-right: 10px;
  cursor: pointer;
  transition-duration: 1s;
}

.word:hover {
  transition-duration: 1s;
  text-decoration: underline;
}

.line {
  padding-top: 10px;
}

.line:nth-child(2n) {
  background-color: floralwhite;
}
</style>